<template>
  <div class="department">
    <div class="department-box">

      <div class="page-left">
        <div class="logo-box">
          <!-- <img class="logo-img" src="../../static/imgs/logo.png" alt=""> -->
          <div class="title">{{ $t('assemble.欢迎来到网易标签订购系统') }} <span style="font-size:15px;">V2.0</span> </div>

          <div class="page-text" v-html="content">
          </div>
        </div>
      </div>

      <div v-if="show" class="department-content">
        <div class="findpassword-text">
          {{ $t('assemble.部门账号注册') }}
        </div>

        <div class="findpassword-bottom">


          <el-form :model="desigrForm" :rules="desigrrules" ref="desigrForm" label-width="100px" class="demo-ruleForm">

            <el-form-item prop="companyName">
              <div class="content-box">
                <div class="content-text">
                  <p class="shu"></p>
                  <p>{{ $t('assemble.已注册的公司名称') }} </p>
                </div>
                <el-input v-model="desigrForm.companyName" :placeholder="$t('assemble.请输入')"></el-input>
              </div>
            </el-form-item>

            <el-form-item prop="companyEmail">
              <div class="content-box">
                <div class="content-text">
                  <p class="shu"></p>
                  <p>{{ $t('assemble.已注册的公司账户') }} </p>
                </div>
                <el-input v-model="desigrForm.companyEmail" :placeholder="$t('assemble.请输入')"
                  @blur="handelcheckCompany"></el-input>
              </div>
            </el-form-item>

            <el-form-item prop="departmentName">
              <div class="content-box">
                <div class="content-text">
                  <p class="shu"></p>
                  <p>{{ $t('assemble.部门名称') }} {{ $t('assemble.列项目部') }}</p>
                </div>
                <el-input v-model="desigrForm.departmentName" :placeholder="$t('assemble.请输入')"></el-input>
              </div>
            </el-form-item>

            <el-form-item prop="email">
              <div class="content-box">
                <div class="content-text">
                  <p class="shu"></p>
                  <p>{{ $t('assemble.部门账户的邮箱地址') }} </p>
                </div>
                <el-input class="input" v-model="desigrForm.email" :placeholder="$t('assemble.请输入')"></el-input>
              </div>
            </el-form-item>
            <el-form-item prop="authcode">

              <div class="content-box huoqu-box">
                <div class="content-text">
                  <p class="shu"></p>
                  <p>{{ $t('assemble.部门账户邮箱收到的验证码') }} </p>
                </div>

                <el-input v-model="desigrForm.authcode" :placeholder="$t('assemble.请输入')" @blur="checkCode"></el-input>
                <div v-if="codeflag" class="gain" @click="handleSendcode">
                  {{ $t('assemble.获取') }}
                </div>
                <div v-else class="gain">
                  {{ time }}s
                </div>
              </div>
            </el-form-item>

            <el-form-item prop="password">
              <div class="content-box">
                <div class="content-text">
                  <p class="shu"></p>
                  <p>{{ $t('assemble.部门账户的密码') }} </p>
                </div>
                <el-input v-model="desigrForm.password" :placeholder="$t('assemble.请输入')" show-password></el-input>
              </div>
            </el-form-item>
          </el-form>
          <div class="login-btn" @click="show = false">{{ $t('assemble.下一步') }}</div>
        </div>
      </div>

      <div v-else class="department-content">
        <div class="company-text">
          <span style="font-size: 13px; cursor: pointer;margin-right: 10px;" @click="handleback"><i
              class="el-icon-back">{{ $t('assemble.上一步') }}</i></span> {{ $t('assemble.完善资料') }}
        </div>
        <div class="company-bottom">

          <el-form :model="wanshanForm" :rules="wanshanrules" ref="wanshanForm" label-width="100px" class="demo-ruleForm">
            <!-- <el-form-item prop="chName">
              <div class="content-box">
                <div class="content-text">
                  <p class="shu"></p>
                  <p>被授权商中文名称</p>
                </div>
                <el-input class="input" v-model="wanshanForm.chName" placeholder="请输入"></el-input>
              </div>
            </el-form-item> -->

            <el-form-item prop="name">
              <div class="content-box">
                <div class="content-text">
                  <p class="shu"></p>
                  <p>{{ $t('assemble.姓名') }}</p>
                </div>
                <el-input class="input" v-model="wanshanForm.name" :placeholder="$t('assemble.请输入')"></el-input>
              </div>
            </el-form-item>

            <el-form-item prop="phone">
              <div class="content-box">
                <div class="content-text">
                  <p class="shu"></p>
                  <p>{{ $t('assemble.电话') }}</p>
                </div>
                <el-input class="input" v-model="wanshanForm.phone" :placeholder="$t('assemble.请输入')"></el-input>
              </div>
            </el-form-item>

            <el-form-item prop="mobile">
              <div class="content-box">
                <div class="content-text">
                  <p class="shu"></p>
                  <p>{{ $t('assemble.手机号') }}</p>
                </div>
                <el-input class="input" v-model="wanshanForm.mobile" :placeholder="$t('assemble.请输入')"></el-input>
              </div>
            </el-form-item>
          </el-form>
        </div>
        <div class="login-btn mar" @click="submitmessage">{{ $t('assemble.提交') }}</div>
      </div>

    </div>

  </div>
</template>
<script>
import { sendcode, check, emailregister, onepage, checkCompany } from '../../utils/api'

export default {
  data() {
    return {
      codeflag: true,
      desigrForm: {
        email: "",
        authcode: "",//验证码
        password: "",//密码
        // companyemail: '',//公司邮箱
        companyName: "",//已注册的公司名称
        companyEmail: "",//已注册的公司账户
        departmentName: "",//部门名称

      },
      desigrrules: {
        companyName: [
          { required: true, message: this.$t('assemble.请输入已注册的公司名称'), trigger: 'blur' },
        ],
        companyEmail: [
          { required: true, message: this.$t('assemble.请输入已注册的公司账户'), trigger: 'blur' },
        ],
        departmentName: [
          { required: true, message: this.$t('assemble.部门名称'), trigger: 'blur' },
        ],
        email: [
          { required: true, message: this.$t('assemble.请输入邮箱地址'), trigger: 'blur' },
        ],
        authcode: [
          { required: true, message: this.$t('assemble.请输入验证码'), trigger: 'blur' },
        ],
        password: [
          { required: true, message: this.$t('assemble.请输入密码'), trigger: 'blur' },
        ],

      },
      // email: '',
      // authcode: '',
      // password: '',
      wanshanForm: {
        chName: '',//被授权商中文名称
        name: '',//姓名
        phone: '',//电话
        mobile: '',//手机号

      },
      wanshanrules: {
        chName: [
          { required: true, message: this.$t('assemble.请输入被授权中文名称'), trigger: 'blur' },
        ],
        name: [
          { required: true, message: this.$t('assemble.请输入姓名'), trigger: 'blur' },
        ],
        phone: [
          { required: true, message: this.$t('assemble.请输入姓名'), trigger: 'blur' },        
        ],
        mobile: [
          { required: true, message: this.$t('assemble.请输入手机号'), trigger: 'blur' },

        ]
      },
      show: true,
      // chName: '',//被授权商中文名称
      // name: '',//姓名
      // phone: '',//电话
      // mobile: '',//手机号
      time: 60,
      content: "",

    }
  },
  mounted() {
    this.genAboutus()
  },
  methods: {

    handleback() {
      this.show = true
    },
    async genAboutus() {
      let res = await onepage({
        name: "loginbeief"
      })
      if (res.code == 1) {
        console.log("关于我们", res)
        this.content = res.data
      }
      if (res.code == 401) {
        this.$router.push({ path: '/login' })
      }

    },
    //验证公司名称
    async handelcheckCompany() {
      //  console.log("公司名称",this.dataForm.companyName)
      if (this.desigrForm.companyName == "") return
      let res = await checkCompany({
        company: this.desigrForm.companyName,
        email1: this.desigrForm.companyEmail
      })
      if (res == 1) {
        console.log("验证公司名称", res)

        this.$message({
          message: this.$t('assemble.该公司名称或账户不存在'),
          type: 'error'
        });
      }
    },
    //获取验证码
    async handleSendcode() {
      const that = this
      let res = await sendcode({
        email: that.desigrForm.email,
        event: 'register'
      })
      if (res.code == 1) {
        this.$message({
          message: this.$t('assemble.验证码发送成功'),
          type: 'success'
        });
        that.codeflag = false
        const interval = window.setInterval(function () {
          if ((that.time--) <= 0) {
            that.time = 60
            that.codeflag = true
            window.clearInterval(interval)
          }
        }, 1000)
      } else {
        this.$message({
          message: res.msg,
          type: 'error'
        });
      }

    },
    //注册校验验证码
    async checkCode() {
      // console.log("2222", this.desigrForm.authcode)
      if (this.desigrForm.authcode == "") return
      let res = await check({
        email: this.desigrForm.email,
        event: 'register',
        captcha: this.desigrForm.authcode
      })

      // console.log("校验验证码", res)
      if (res.code == 1) {
        // this.$message({
        //   message: '注册成功，请完善资料！',
        //   type: 'success'
        // });
      } else {
        this.$message({
          message: res.msg,
          type: 'error'
        });
      }
    },

    //提交
    async submitmessage() {
      let data = {
        type: "2",
        // company:this.desigrForm.companyName,
        companyemail: this.desigrForm.companyEmail,
        department: this.desigrForm.departmentName,
        email: this.desigrForm.email,
        captcha: this.desigrForm.authcode,
        password: this.desigrForm.password,
        chinesename: this.desigrForm.companyName,
        name: this.wanshanForm.name,
        phone: this.wanshanForm.phone,
        mobile: this.wanshanForm.mobile,
      }
      console.log("data", data)
      let res = await emailregister(data)
      console.log("res", res)
      if (res.code == 1) {
        this.show = false
        this.$message({
          message:this.$t('assemble.请等待网易批准后登入系统'),
          type: 'success'
        });
        this.$router.push({ path: '/login' })

      } else {
        this.$message({
          message: res.msg,
          type: 'warning'
        });
      }
    }
  },


}

</script>
<style scoped lang="scss">
.department {
  width: 100vw;
  height: 100vh;
  background: #F8F8F8;
  border-radius: 0px 0px 0px 0px;

  .department-box {
    display: flex;
    align-items: center;

    .page-left {
      width: 400px;
      height: 100vh;
      background: #E00000;
      border-radius: 0px 0px 0px 0px;
      opacity: 1;
      // padding: 434px 100px;
      box-sizing: border-box;

      .logo-box {
        height: 56px;
        width: 100%;
        text-align: center;
        margin-top: 400px;

        .title {
          // width: 387px;
          height: 21px;
          font-size: 24px;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: white;
          line-height: 28px;
          width: 100%;
          text-align: center;
          font-weight: bolder;
        }

        .page-text {
          font-size: 16px;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #FFFFFF;
          line-height: 28px;
          margin-top: 30px;

        }

        .logo-img {
          width: 100%;
          height: 100%;
        }
      }


    }

    .department-content {
      width: 600px;
      height: 680px;
      background: #FFFFFF;
      box-shadow: 5px 0px 15px 0px rgba(224, 0, 0, 0.05);
      border-radius: 50px 50px 50px 50px;
      opacity: 1;
      margin-left: 260px;
      padding: 30px;
      box-sizing: border-box;

      .company-text {
        font-size: 18px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        line-height: 28px;
      }


      .findpassword-text {
        font-size: 18px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        line-height: 28px;
      }

      .findpassword-bottom {
        // margin-top: 30px;

        .content-box {

          .content-text {
            font-size: 15px;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
            line-height: 21px;
            display: flex;
            align-items: center;

            .shu {
              width: 4px;
              height: 14px;
              background: #E00000;
              border-radius: 2px 2px 2px 2px;
              opacity: 1;
              margin-right: 6px;
            }
          }

          .content-box {
            width: 350px;
            height: 42px;
            border-radius: 10px 10px 10px 10px;
            opacity: 1;
            border: 1px solid #EDEDED;
          }
        }

        .huoqu-box {
          position: relative;

          .gain {
            font-size: 14px;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: #E00000;
            line-height: 16px;
            position: absolute;
            right: 10px;
            top: 65px;
            cursor: pointer;
          }
        }
      }


    }

    .login-btn {
      width: 350px;
      height: 45px;
      background: linear-gradient(315deg, #E00000 0%, #FF2424 100%);
      border-radius: 22px 22px 22px 22px;
      opacity: 1;
      font-size: 16px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #FFFFFF;
      line-height: 45px;
      text-align: center;
      margin: 20px auto 0;
      cursor: pointer;

    }
  }
}

.content-text {
  display: flex;
  align-items: center;
}

.shu {
  width: 4px;
  height: 14px;
  background: #E00000;
  border-radius: 2px 2px 2px 2px;
  opacity: 1;
  margin-right: 6px;
}

::v-deep .el-form-item__content {
  margin-left: 0px !important;
  line-height: normal !important;
  font-size: 15px !important;
}

::v-deep .el-form-item {
  margin-bottom: 0px !important;

}

::v-deep .el-form-item__label {
  font-size: 16px !important;
}
</style>